<template>
  <div class="layout">
    <div v-bind:style="collapsed ? fold : unfold">
      <div class="layout1_children left_sider">
        <div class="logo-icon">
          <img v-show="!collapsed" src="../assets/logo.jpg">
          <img v-show="collapsed" src="../assets/logo-min.jpg">
        </div>
        <sider :collapsed="collapsed"></sider>
      </div>
    </div>
    <div class="layout2">
      <header-bar :collapsed="collapsed" @on-sider-change="handleCollapsedChange">
      </header-bar>
      <div class="layout3">
        <div class="tag-nav-wrapper">
          <tagsnav></tagsnav>
        </div>
        <router-view v-slot="{ Component }" style="background-color: #F5F7F9">
          <transition name="move"
                      mode="out-in">
            <keep-alive :include="tagsList">
              <component :is="Component"/>
            </keep-alive>
          </transition>
        </router-view>
      </div>
    </div>
  </div>

</template>

<script>
import Sider from '../components/Sider'
import HeaderBar from '../components/HeaderBar'
import Tagsnav from '../components/Tagsnav'
// import RightContent from '../components/RightContent'

export default {
  name: 'Main',
  data () {
    return {
      collapsed: false,
      fold: {
        width: '64px',
        minWidth: '64px',
        maxWidth: '64px',
        flex: '0 0 64px',
        overflow: 'hidden'
      },
      unfold: {
        width: '256px'
      }
    }
  },
  components: {
    Sider,
    HeaderBar,
    Tagsnav
    // RightContent
  },
  methods: {
    handleCollapsedChange (state) {
      this.collapsed = state
    }
  },
  computed: {
    tagsList () {
      return this.$store.state.tagsList.map(item => item.name)
    },
    collapse () {
      return this.$store.state.collapse
    }
  }
}
</script>

<style>
.layout {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.layout1_children {
  overflow-y: hidden;
  margin-right: -18px;
  background-color: #031527;
}

.layout2 {
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  flex: auto;
  background-color: #f5f7f9;
}

.layout3 {
  height: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  flex: auto;
  background-color: #f5f7f9;
}

.logo-icon {
  height: 64px;
  padding: 10px;
  flex-direction: row;
}

.logo-icon img {
  height: 44px;
  width: auto;
  display: block;
  margin: 0 auto;
  border-style: none;
}

.left_sider {
  overflow-y: scroll;
  margin-right: -18px;
}

.tag-nav-wrapper {
  padding: 0;
  height: 40px;
  background: #F0F0F0;
}

</style>
